import { Button, Col, Empty, message, Row, Space } from 'antd';
import React, { useEffect, useState } from 'react';
import { withRouter } from 'react-router-dom'
import Layout from '../../components/layout'
import { Res } from '../../types/base';
import $http from '../../utils/require';
import ProductItem, { ProductItemFace } from '../../components/productItem';
import Checkbox from './components/checkbox';
import Radiobox from './components/radiobox';

interface FilterProductItem {
    "sold": number,
    "_id": string,
    "name": string,
    "description": string,
    "price": number,
    "category": {
        "_id": string,
        "name": string,
        "createdAt": string,
        "updatedAt": string,
        "__v": number
    },
    "quantity": number,
    "shipping": boolean,
    "createdAt": string,
    "updatedAt": string,
    "__v": number
}
interface filterReqData {
    "order": string,
    "limit": number,
    "sortBy": string,
    "skip": number,
    "filters": {
        "category": string[],
        "price": [number, number]
    }
}


const Shop = (props: any) => {
    // console.log('Shop', props);
    const [productList, setProductList] = useState<{
        "size": number,
        "data": FilterProductItem[]
    }>({
        "size": 0,
        "data": []
    })

    const [ship, setShip] = useState<number>(0)
    const limit = 8

    const [filterList, setFilterList] = useState<{
        category: string[]
        price: number[]
    }>({ category: [], price: [] })

    const loadMore = () => {
        setShip(ship + limit)
    }

    const filterDom = () => {
        return <Space size="middle" direction="vertical">
            <Checkbox handleFilter={(filters: string[]) => {
                setFilterList({ ...filterList, category: filters })
            }}></Checkbox>
            <Radiobox handleFilter={(filters: number[]) => {
                setFilterList({ ...filterList, price: filters })
            }}></Radiobox>
        </Space>
    }

    useEffect(() => {
        setProductList({
            "size": 0,
            "data": []
        })
        setShip(0)
    }, [filterList])

    useEffect(() => {
        $http['getProductListByFilter']({
            "order": "desc",
            "limit": limit,
            "sortBy": "_id",
            "skip": ship,
            "filters": filterList
        }).then((res: { "size": number, "data": FilterProductItem[] }) => {
            res.data.unshift(...productList.data)
            setProductList(res)
        }).catch((err: Res) => {
            message.error(err.error)
        })
    }, [filterList, ship])

    return (
        <Layout title="frank商城" subtitle="挑选你喜欢的商品吧">
            <Row>
                <Col span="4">{filterDom()}</Col>
                <Col span="20">
                    {
                        (() => {
                            if (productList.data.length === 0) return <Empty></Empty>
                        })()
                    }
                    <Row gutter={[16, 16]}>
                        {
                            productList.data.map(el => {
                                return <Col span="6" key={el._id}>
                                    <ProductItem product={el as unknown as ProductItemFace}></ProductItem>
                                </Col>
                            })
                        }
                    </Row>
                    <Row>
                        {
                            (() => {
                                if (productList.size >= limit) return <Button onClick={loadMore}>加载更多</Button>
                            })()
                        }
                    </Row>
                </Col>
            </Row>
        </Layout>
    )
}

export default withRouter(Shop)
